<template>
  <div class="setting-content-container">
    <div class="setting-content" v-if="appSettings.theme">
      <div class="setting-title">{{ $t("主题") }}</div>
      <div class="setting-box">
        <div class="themes">
          <div
            class="themes-item"
            v-for="(item, index) in themes"
            :key="index"
            @click="onTheme(item.name)"
          >
            <div
              :class="[item.name === theme ? 'active' : '']"
              class="themes-item-color"
              :style="themeStyle(item)"
            />

            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="setting-content" v-if="settings.language">
      <div class="setting-title">{{ $t("系统语言") }}</div>
      <div class="setting-box">
        <div class="lang">
          <div class="lang-radio-group">
            <div
              class="lang-radio-button"
              :class="[item.name === lang ? 'active' : '']"
              v-for="(item, index) in langs"
              :key="index"
              :label="item.name"
              @click="onLang(item.name)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <div class="setting-content" v-if="appSettings.language">
      <div class="setting-title">{{ $t("系统语言") }}</div>
      <div class="setting-box">
        <div class="lang-text">
          <div
            class="lang-text-item"
            :class="[item.name == lang ? 'lang-text-active' : '']"
            v-for="(item, index) in langs"
            :key="index"
            :label="item.name"
            @click="onLang(item.name)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>

    <div class="setting-content" v-if="appSettings.grayscale">
      <div class="setting-title">{{ $t("灰度") }}</div>
      <div class="setting-box">
        <div class="slider-box">
          <el-slider
            v-model="grayscaleNumber"
            style="width: 100%"
            @change="onChangeGrayscale"
          ></el-slider>
        </div>
      </div>
    </div>

    <div class="setting-content" v-if="appSettings.other">
      <div class="setting-title">{{ $t("其他") }}</div>
      <div class="setting-box">
        <div class="other">
          <div class="radio-group">
            <div class="radio-button" @click="removeLocalStorage">
              {{ $t("清除缓存") }}
            </div>
            <div class="radio-button" @click="outLogin">
              {{ $t("退出系统") }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快捷键设置 -->
    <div class="setting-content" v-if="appSettings.hotkey">
      <div class="setting-title">{{ $t("快捷键") }}</div>
      <div class="setting-box">
        <div class="hotkey">
          <div class="hotkey-box">
            <div
              class="hotkey-item"
              v-for="(item, index) in hotkey"
              :key="index"
            >
              <div class="hotkey-title">
                <span class="hotkey-title-text">{{ item.title }}</span>
              </div>
              <div class="hotkey-content">
                <span class="hotkey-content-text">{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "setting-content",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    settings: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      appSettings: {
        theme: true,
        language: true,
        hotkey: true,
        other: true,
        grayscale: true,
      },
      grayscaleNumber: 0,
      themes: [
        {
          title: this.$t("浅色"),
          name: "light",
          color: "#fff",
        },
        {
          title: this.$t("深色"),
          name: "dark",
          color: "#000",
        },
        {
          title: this.$t("自定义"),
          name: "custom",
          color: "#000",
          url: "http://localhost:5337/static/img/bg.0a8d03e7.jpg",
        },
      ],
      langs: [
        {
          title: this.$t("中文"),
          name: "zh-CN",
        },
        {
          title: this.$t("英文"),
          name: "en-US",
        },
      ],
      hotkey: [
        {
          title: this.$t("刷新"),
          name: "F5",
        },
        {
          title: this.$t("搜索"),
          name: "Ctrl + S",
        },
        {
          title: this.$t("退出"),
          name: "Ctrl + Q",
        },
        {
          title: this.$t("最小化"),
          name: "ESC",
        },
        {
          title: this.$t("最大化"),
          name: "F11",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["theme", "lang", "grayscale"]),
  },
  // 监听
  watch: {
    grayscale: {
      immediate: true,
      handler(val) {
        this.grayscaleNumber = parseInt(val);
      },
    },
    settings: {
      deep: true,
      immediate: true,
      handler(obj) {
        for (const key in obj) {
          if (key) {
            this.$set(this.appSettings, key, obj[key]);
          }
        }
      },
    },
  },
  methods: {
    // 主题
    onTheme(theme) {
      this.$store.dispatch("app/setTheme", theme);
    },
    // 关闭设置弹窗
    onClose() {
      this.$emit("update:visible", false);
    },
    // 语言
    onLang(lang) {
      this.$store.dispatch("app/setLang", lang);
      location.reload();
    },
    onChangeGrayscale(data) {
      this.$store.dispatch("app/setGrayscale", data);
    },
    // 退出登陆
    outLogin() {
      localStorage.clear();
      location.reload();
    },
    removeLocalStorage() {
      localStorage.clear();
      sessionStorage.clear();
      this.$Bus.$emit("reload");
    },
    themeStyle(theme) {
      if (theme.url) {
        return {
          backgroundImage: theme.url ? `url(${theme.url})` : theme.color,
          backgroundSize: "100% 100%",
          backgroundRepeat: "no-repeat",
        };
      } else {
        return {
          background: theme.color ? theme.color : "none",
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.setting-content-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.setting-content {
  width: 100%;
  padding: 6px 0px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  border-bottom: 1px solid var(--main-border);

  .setting-title {
    width: 120px;
    padding: 6px 0px;
    font-size: 14px;
  }
  .setting-box {
    width: 100%;
    height: 100%;
  }
}

// 主题
.themes {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 6px;

  .themes-item {
    width: 100px;
    height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .themes-item-color {
      width: 100%;
      height: 90%;
      border-radius: 4px;
      border: 2px solid var(--main-border);
      margin-bottom: 4px;

      &:hover {
        cursor: pointer;
        border: 2px solid var(--main-hover);
      }
    }

    .active {
      border: 2px solid var(--main-hover);
      color: var(--main-color);
    }

    & span {
      font-size: 12px;
      color: var(--main-color);
    }
  }
}

// 语言
.lang-radio-group {
  width: 100%;
  height: 32px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .lang-radio-button {
    width: 100px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border-top: 2px solid var(--main-border);
    border-bottom: 2px solid var(--main-border);
    border-right: 1px solid var(--main-border);
    border-left: 1px solid var(--main-border);

    &:first-child {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-right: 1px solid var(--main-border);
      border-left: 2px solid var(--main-border);
    }

    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-left: 1px solid var(--main-border);
      border-right: 2px solid var(--main-border);
    }

    &:hover {
      cursor: pointer;
      background: var(--main-hover);
      color: var(--main-hover-color);
    }
  }

  .active {
    background: var(--main-hover);
    color: var(--main-hover-color);
  }
}

// 其他
.other {
  width: 100%;
  height: 32px;

  .radio-group {
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .radio-button {
      width: 100px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      border-radius: 4px;
      margin-right: 6px;
      border: 2px solid var(--main-border);

      &:hover {
        cursor: pointer;
        border-color: var(--main-hover);
      }
    }
  }
}

// 快捷键
.hotkey {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .hotkey-box {
    position: relative;
    width: 100%;

    &::before {
      display: inline-block;
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 24x;
      line-height: 24px;
      z-index: -1;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .hotkey-item {
    width: 100%;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;

    .hotkey-title {
      width: 100px;
      text-align: left;
    }

    .hotkey-content {
      flex: 1;
      word-wrap: normal;
    }
  }
}

.slider-box {
  width: 98%;
  margin: 0 auto;
}

.lang-text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .lang-text-active {
    color: var(--main-hover);
  }

  .lang-text-item {
    font-size: 12px;
    text-align: left;
    &:hover {
      cursor: pointer;
      color: var(--main-hover);
    }
    &:after {
      content: "";
      width: 1px;
      height: 100%;
      margin: 0 4px;
    }
  }
}
</style>